<template>
	<div id="contentBox">
		<div class="searchBox">
			<el-form :inline="true"  ref="searchForm"  :model="searchForm" label-width="96px">
				<el-form-item label="申请日期起" prop="startDate">
				    <el-date-picker :editable="false"  
				       @change="debounceSeach"
				      v-model="searchForm.startDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="startDateOpt"
				      >
				    </el-date-picker>
				</el-form-item>
				<el-form-item label="申请日期止" prop="endDate">
				    <el-date-picker :editable="false"  
				       @change="debounceSeach"
				      v-model="searchForm.endDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="endDateOpt"
				      >
				    </el-date-picker>
				</el-form-item>
	            <el-form-item label="订单号" prop="orderNumber" >
				    <el-input v-model="searchForm.orderNumber" placeholder="请输入搜索内容..." 
				     @input.native="debounceSeach" ></el-input >
				</el-form-item>
				<el-form-item label="订单类型" prop="type" >
				     <el-select v-model="searchForm.type" placeholder="请选择订单类型" @change="debounceSeach">
				     <el-option label="请选择订单类型" value=""></el-option>		
				     <el-option v-for="(item, index) in orderTypeMap" :label="item" :value="index" :key="index">
				     </el-option>
				   </el-select>
				</el-form-item>
				
				<el-form-item label="经销商名称" prop="dealerName" >
				     <el-input v-model="searchForm.dealerName" placeholder="请输入搜索内容..."
				      @input.native="debounceSeach">
				    </el-input >
				</el-form-item>
				 <el-form-item label="汽车车型"  prop="carBrandNameAndCarName">
				   <el-input v-model="searchForm.carBrandNameAndCarName" placeholder="请输入搜索内容..."
				   @input.native="debounceSeach" ></el-input >
				</el-form-item>
                 <el-form-item label="车架号"  prop="vin">
				   <el-input v-model="searchForm.vin" placeholder="请输入搜索内容..."
				   @input.native="debounceSeach" ></el-input >
				</el-form-item>

			    <el-form-item label="订单状态" prop="status" >
				     <el-select v-model="searchForm.status" placeholder="请选择订单状态" @change="debounceSeach">
	                 <el-option label="请选择订单状态" value=""></el-option>			   
				     <el-option v-for="(item, index) in statusMap" :label="item" :value="index" :key="index">
				     </el-option>
				   </el-select>
				</el-form-item>
				<el-form-item label="物流状态" prop="logisticsInfoStatus" >
				     <el-select v-model="searchForm.logisticsInfoStatus" placeholder="请选择物流状态" @change="debounceSeach">	
				        <el-option label="请选择物流状态" value=""></el-option>			   
				     	<el-option v-for="(item, index) in logisticsStatusMap" :label="item" :value="index" :key="index">
				     </el-option>
				   </el-select>
				</el-form-item>
				<el-form-item label="保证金状态" prop="depositInfoStatus" >
				     <el-select v-model="searchForm.depositInfoStatus" placeholder="请选择保证金状态" @change="debounceSeach">	
	                 <el-option label="请选择保证金状态" value=""></el-option>			   
				     <el-option v-for="(item, index) in cashDepositStatusMap" :label="item" :value="index" :key="index">
				     </el-option>
				   </el-select>
				</el-form-item>
				<el-form-item label="验车状态" prop="carInspectionInfoStatus" >
				     <el-select v-model="searchForm.carInspectionInfoStatus" placeholder="请选择验车状态" @change="debounceSeach">
                	<el-option label="请选择验车状态" value=""></el-option>			   
				     	<el-option v-for="(item, index) in carInspectionStatusMap" :label="item" :value="index" :key="index">
				     </el-option>
				   </el-select>
				</el-form-item>
				<el-form-item label="提车跟踪状态" prop="logisticsFollowStatus" >
				     <el-select v-model="searchForm.logisticsFollowStatus" placeholder="请选择提车跟踪状态" @change="debounceSeach">	
	                  <el-option label="请选择提车跟踪状态" value=""></el-option>			   
				     	<el-option v-for="(item, index) in logisticsFollowStatusMap" :label="item" :value="index" :key="index">
				     </el-option>
				   </el-select>
				</el-form-item>
				<el-form-item style="margin-bottom: 10px;">
				  <el-button @click="resetSearchForm('searchForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="tableBox" style="margin:0 25px;" >
			<el-table :data="tableData.data" border  >
			    <el-table-column label="订单号" width="120" fixed>
			      <template scope="scope">
			        <span >{{ scope.row.orderNumber }}</span>
			      </template>
			    </el-table-column>
			    
			    <el-table-column label="经销商名称" width="250">
			      <template scope="scope">
			        <span >{{ scope.row.dealerName }}</span>
			      </template>
			    </el-table-column>
			    
			    <el-table-column label="汽车车型" :min-width="300">
			      <template scope="scope">
			        <span >{{ scope.row.carBrandNameAndCarName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="垫资金额" width="120">
			      <template scope="scope">
			        <span >{{ (scope.row.paymentAmount||0)|toFixed2 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="订单状态" width="80">
			      <template scope="scope">
			        <span  v-for="(index, item) in scope.row.carOrderStatusVO" >{{ item }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="物流状态" width="80">
			      <template scope="scope">
			         <span  v-for="(index, item) in scope.row.logisticsInfoStatusVO" >{{ item }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="验车状态" width="80">
			      <template scope="scope">
			         <span  v-for="(index, item) in scope.row.carInspectionInfoStatusVO" >{{ item }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="保证金状态" width="90">
			      <template scope="scope">
			         <span  v-for="(index, item) in scope.row.cashDepositInfoStatusVO" >{{ item }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="提车跟踪状态" width="110">
			      <template scope="scope">
			         <span  v-for="(index, item) in scope.row.logisticsFollowStatusVO" >{{ item }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="订单类型" width="80">
			      <template scope="scope">
			         <span  v-for="(index, item) in scope.row.carOrderTypeVO" >{{ item }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="申请日期" width="160">
			      <template scope="scope">
			        <span >{{ scope.row.addTime }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作" width="80" fixed="right">
			      <template scope="scope">
			      	<!-- 这里根据订单状态传第三个参数 是退单传true  反则false -->
			      	<el-button size="small" @click="handleSee(scope.$index, scope.row,false)">查看</el-button>
			      </template>
			    </el-table-column>
			</el-table>
            <el-dialog title="订单管理" v-if="dialogSendData.dialogFormVisible" :visible.sync="dialogSendData.dialogFormVisible"  :lock-scroll='true' top=5% :close-on-click-modal="false" >
                <dialogForm :dialogSendData="dialogSendData" :tableData="tableData" v-on:refreshSeachData="seachData"></dialogForm>		
			</el-dialog>
	    </div>
	    <div class="block" style="text-align: center;margin-top: 15px;">
	    	<pagination v-on:refreshSeachData="seachData()"  :tableData="tableData" :searchForm="searchForm"></pagination>
		</div>
	</div>
</template>
<script src="./index.js">

</script>
<style scoped lang="stylus" rel="styleheet/stylus">
	@import './index.styl';
</style>